<template>
	<view class="liveRoom">
		<canvas id="cvs" style="width: 200upx; height: 400upx;">
		</canvas>
		<image src="../../static/logo.png" id="heart">	   
		</image>
	</view>
</template>

<script>
	import LikeHeart from "./index";
	export default {
	 props: ["ClassTimePlayer", "videoUrl"],
	 data() {
	  return {
	   width: 175, //初始宽度
	   height: 400, //初始高度
	   heartList: [], //初始数组
	   heartCount: 0 //累加计数初始值
	  };
	 },
	 methods: {
	  getRandomDis() {
	   if (Math.random() > 0.5) {
	    return -(Math.random() * 43);
	   } else {
	    return +(Math.random() * 43);
	   }
	  },
	  createHeart() {
	   this.heartCount++;
	   let positionArray = [
	    {
	     x: 65,
	     y: 200,
	     endX: 50,
	     endY: 50 + this.getRandomDis()
	    }
	   ];
	   let img = new Image();
	   // img.src = `../../static/img/${Math.ceil(Math.random() * 5)}.png`;
	   img.src = `../../static/logo.png`;
	   let p1 = {
	    x: 50 + this.getRandomDis(),
	    y: 70 + this.getRandomDis()
	   };
	   let p2 = {
	    x: 100 + this.getRandomDis(),
	    y: 100 + this.getRandomDis()
	   };
	   return new LikeHeart({
	    id: this.heartCount,
	    x: positionArray[0].x,
	    y: positionArray[0].y,
	    endX: positionArray[0].endX,
	    endY: positionArray[0].endY,
	    onFadeOut: this.removeItem,
	    noAngel: true,//决定是否左右摆动
		noScale: true, //是否使用缩放心动画
	    width: 20, //决定心的大小
	    height: 20,
	    image: img,
	    bezierPoint: {
	     p0: {
	      x: positionArray[0].x,
	      y: positionArray[0].y
	     },
	     p1: p1,
	     p2: p2,
	     p3: {
	      x: positionArray[0].endX,
	      y: positionArray[0].endY
	     }
	    }
	   });
	  },
	  removeItem(item) {
	   var array = [];
	   for (var i = 0; i < this.heartList.length; i++) {
	    if (this.heartList[i].id !== item.id) {
	     array.push(this.heartList[i]);
	    }
	   }
	   this.heartList = array;
	  },
	  },
	 onReady() {
	  // 飘心
	  var _this = this;
	  var ctx = document.querySelector('#cvs > canvas').getContext("2d");
	  console.log(ctx,'ctx');
	  (ctx.canvas.width = _this.width),
	   (ctx.canvas.height = _this.height),
	   (function loop() {
	    ctx.clearRect(0, 0, _this.width, _this.height);
	    _this.heartList.forEach(function(item) {
	     item && item.move(ctx);
	    });
	    requestAnimationFrame(loop);
	   })();
	  // setInterval(function() {
	  //  _this.heartList.push(_this.createHeart());
	  // }, 100);
	  document.getElementById("heart").addEventListener(
	   "click",
	   function() {
	    _this.heartList.push(_this.createHeart());
	   },
	   false
	  );
	 },
	};
</script>

<style lang="scss" scoped>
	.liveRoom {
		position: relative;
	}
	#cvs {
		bottom: 20upx;
	}
	#heart {
		position: absolute;
		bottom: 0upx;
		left: 70upx;
		width: 60upx;
		height: 60upx;
	}
</style>
